import Form from '../modules/Form/index.vue'
import { handleTree } from '@/utils/tree'
import { message } from '@/utils/message'
import { transformI18n } from '@/plugins/i18n'
import { addDialog } from '@/components/ReDialog'
import { reactive, ref, onMounted, h } from 'vue'
import MenuAPI from '@/api/system/menu'
import type { FormQueryData } from '@/api/system/menu/types'
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
import { cloneDeep, isAllEmpty, deviceDetection } from '@pureadmin/utils'

export function useMenu() {
  const form = reactive({
    title: ''
  })

  const formRef = ref()
  const dataList = ref([])
  const loading = ref(true)

  const getMenuType = (type, text = false) => {
    switch (type) {
      case 0:
        return text ? '菜单' : 'primary';
      case 1:
        return text ? 'iframe' : 'warning';
      case 2:
        return text ? '外链' : 'danger';
      case 3:
        return text ? '按钮' : 'info';
    }
  }

  const columns: TableColumnList = [{
    label: '菜单名称',
    prop: 'title',
    align: 'left',
    cellRenderer: ({ row }) => (
      <>
        <span class="inline-block mr-1">
          {h(useRenderIcon(row.icon), {
            style: { paddingTop: "1px" }
          })}
        </span>
        <span>{transformI18n(row.title)}</span>
      </>
    )
  }, {
    label: "菜单类型",
    prop: "menuType",
    width: 100,
    cellRenderer: ({ row, props }) => (
      <el-tag
        size={props.size}
        type={getMenuType(row.menuType)}
        effect="plain"
      >
        {getMenuType(row.menuType, true)}
      </el-tag>
    )
  }, {
    label: "路由路径",
    prop: "path"
  }, {
    label: "组件路径",
    prop: "component",
    formatter: ({ path, component }) =>
      isAllEmpty(component) ? path : component
  }, {
    label: "权限标识",
    prop: "auths"
  }, {
    label: "排序",
    prop: "rank",
    width: 100
  }, {
    label: "隐藏",
    prop: "showLink",
    formatter: ({ showLink }) => (showLink ? "否" : "是"),
    width: 100
  }, {
    label: "创建时间",
    prop: "createTime",
    width: 190
  }, {
    label: "操作",
    fixed: "right",
    width: 210,
    slot: "operation"
  }]

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
  }

  function resetForm(formEl) {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  }

  async function onSearch() {
    loading.value = true
    const { data } = await MenuAPI.getList() // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
    let newData = data
    if (!isAllEmpty(form.title)) {
      // 前端搜索菜单名称
      newData = newData.filter(item =>
        transformI18n(item.title).includes(form.title)
      )
    }
    dataList.value = handleTree(newData) // 处理成树结构
    loading.value = false
  }

  function formatHigherMenuOptions(treeList) {
    if (!treeList || !treeList.length) return
    const newTreeList = []
    for (let i = 0; i < treeList.length; i++) {
      treeList[i].title = transformI18n(treeList[i].title)
      formatHigherMenuOptions(treeList[i].children)
      newTreeList.push(treeList[i])
    }
    return newTreeList
  }

  function openDialog(title = '新增', row?: FormQueryData) {
    addDialog({
      title: `${title}菜单`,
      props: {
        formInline: {
          menuType: row?.menuType ?? 0,
          parentId: row?.parentId ?? 0,
          title: row?.title ?? '',
          name: row?.name ?? '',
          path: row?.path ?? '',
          component: row?.component ?? '',
          rank: row?.rank ?? undefined,
          redirect: row?.redirect ?? '',
          icon: row?.icon ?? '',
          extraIcon: row?.extraIcon ?? '',
          enterTransition: row?.enterTransition ?? '',
          leaveTransition: row?.leaveTransition ?? '',
          activePath: row?.activePath ?? '',
          auths: row?.auths ?? '',
          frameSrc: row?.frameSrc ?? '',
          frameLoading: row?.frameLoading ?? true,
          keepAlive: row?.keepAlive ?? false,
          hiddenTag: row?.hiddenTag ?? false,
          fixedTag: row?.fixedTag ?? false,
          showLink: row?.showLink ?? true,
          showParent: row?.showParent ?? false
        },
        higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
      },
      width: "45%",
      draggable: true,
      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      sureBtnLoading: true,
      closeOnClickModal: false,
      contentRenderer: () => h(Form, { ref: formRef, formInline: null, higherMenuOptions: null }),
      beforeSure: (done, { options, closeLoading }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline as FormQueryData;
        function chores() {
          message(
            `您${title}了菜单名称为${transformI18n(curData.title)}的这条数据`,
            {
              type: "success"
            }
          );
          done() // 关闭弹框
          onSearch() // 刷新表格数据
        }
        FormRef.validate((valid: boolean) => {
          if (valid) {
            // 表单规则校验通过
            if (title === "新增") {
              MenuAPI.create(toRaw(curData)).then(() => {
                chores()
              })
            } else {
              MenuAPI.update(row.id, toRaw(curData)).then(() => {
                chores()
              })
            }
          } else {
            closeLoading()
          }
        })
      }
    })
  }

  function handleDelete(row: FormQueryData) {
    MenuAPI.delete(row.id).then(() => {
      message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
        type: "success"
      });
      onSearch()
    })
  }

  onMounted(() => {
    onSearch()
  })

  return {
    form,
    loading,
    columns,
    dataList,
    /** 搜索 */
    onSearch,
    /** 重置 */
    resetForm,
    /** 新增、修改菜单 */
    openDialog,
    /** 删除菜单 */
    handleDelete,
    handleSelectionChange
  }
}
